<template>
  <div class="hello">
    <h1>{{this.$route.query.name}}</h1>
     <el-carousel :interval="4000" type="card" height="200px">
    <el-carousel-item v-for="item in 4" :key="item">
      <!-- <h3 class="medium">{{ item }}</h3> -->
      <!-- https://res.bestcake.com/m-images/jd-detail/草莓拿破仑/%E8%8D%89%E8%8E%93%E6%8B%BF%E7%A0%B4%E4%BB%91-1.jpg?v=20170607 -->
      <img :src="'https://res.bestcake.com/m-images/jd-detail/'+$route.query.name+'/'+$route.query.name+'-'+item+'.jpg?v=20170607'" alt="">
    </el-carousel-item>
  </el-carousel>
  </div>
</template>

<script>
import api from "../../core/api/index";
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: ""
    };
  },
  mounted() {
    console.log(this.$route.query.name);
    this.msg=this.$route.query.name
    const data = {
      City: "上海",
      ProName: this.$route.query.name,
      c: "Product",
      m: "GetCakeByName"
    };
    api.GetdescList(data).then(res => {
      console.log(res);
    });
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='scss'>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>


